<template>
  <div class="event_report_config">
    <a-form-model label-position="left" :label-width="80">
      <transition name="slide-fade">
        <a-row>
          <a-col span="24">
            <a-form-model-item label="指标" style="margin-top:20px;">
              <IndicatorGroup 
                v-bind:properties="properties" 
                v-bind:events="events"
                v-bind:measures="measures"
                v-bind:indicators="config.indicators"
                v-bind:datasourceId="form.datasourceId"
              >
              </IndicatorGroup>
            </a-form-model-item>

            <a-form-model-item style="margin-top:10px;" label="维度">
              <DimensionGroup 
                v-bind:properties="properties"
                v-bind:dimensions="config.dimensions"
                virtual
              >
              </DimensionGroup>
            </a-form-model-item>

            <a-form-model-item style="margin-top:10px;" label="筛选条件">
              <a-button v-on:click="addRule">添加筛选</a-button>
              <MultiLevelFilter 
                ref="filter" 
                v-model="config.filter" 
                v-bind:properties="properties"
                v-bind:datasourceId="form.datasourceId"
                virtual 
                v-on:remove="demote"
              >
              </MultiLevelFilter>
            </a-form-model-item>
            <a-form-model-item style="margin-top:10px;" label="数据显示">
              <DisplayGroup 
                v-bind:display="config.display" 
                v-bind:events="events" 
                v-bind:measures="measures" 
                v-bind:indicators="config.indicators"
              >
              </DisplayGroup>
            </a-form-model-item>
            <a-form-model-item style="margin-top:10px;" label="时间周期">
              <a-range-picker @change="onChange" v-model="defaultTime" :placeholder="['开始时间', '结束时间']" />
              <a-select v-model="form.config.time.unit" style="width: 100px; margin-left: 5px;" @change="handleChange" placeholder="请选择">
                <a-select-option :value="item.value" v-for="item in timeUnits" :key="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </transition>
    </a-form-model>
  </div>

</template>

<script>
import IndicatorGroup from "@/views/components/IndicatorGroup.vue";
import DimensionGroup from "@/views/components/DimensionGroup.vue";
import DisplayGroup from "@/views/components/DisplayGroup.vue"
import CommonFilterGroup from "@/views/components/CommonFilterGroup.vue";
import MultiLevelFilter from "@/views/components/Filter/MultiLevelFilter.vue";

export default {
  name: "EventReportConfig",
  components: {MultiLevelFilter, CommonFilterGroup, DimensionGroup, IndicatorGroup, DisplayGroup},
  props: {
    config: Object,
    properties: Array,
    events: Array,
    measures: Array,
    time: Object,
    form: Object
  },
  data: function() {
    return {
      timeUnits: [
        {
            label: '合计',
            value: 'none'
        },
        {
            label: '按天',
            value: 'day'
        },
        {
            label: '按周',
            value: 'week'
        },
        {
            label: '按月',
            value: 'month'
        }
      ],
      defaultTime: null
    }
  },
  computed: {},
  methods: {
    addRule() {
        this.$refs.filter.addRule();
    },
    //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
    demote: function (index) {
      let filterIndex = this.config.filter.filters.findIndex((item) => {
        return item.index === index;
      });
      if(filterIndex !== -1) {
        let filter = this.config.filter.filters[filterIndex];
        this.config.filter.filters.splice(filterIndex, 1);
        this.config.filter.condition = filter.condition;
        filter.rules.forEach((item, index) => {
          this.config.filter.rules.push(item);
        });
        filter.filters.forEach((item, index) => {
          this.config.filter.filters.push(item);
        });
      }
    },
    onChange (e, date) {
      this.form.config.time.start = date[0]
      this.form.config.time.end = date[1]
    },
    handleChange () {}
  },
  mounted () {
    if (this.form.config.time.start || this.form.config.time.end) {
      this.defaultTime = [this.moment(this.form.config.time.start).format('YYYY-MM-DD'), this.moment(this.form.config.time.end).format('YYYY-MM-DD')]
    } else {
      this.defaultTime = null
    }
  }
}
</script>

<style scoped>
.event_report_config {
  height: 100%;
}

.event-report-config {
  padding: 0px;
}

form.ant-form.ant-form-horizontal{
  height: 100%;
}

.ant-row.ant-form-item{
  display: flex;
}

.ant-row.ant-form-item>>>.ant-col.ant-form-item-control-wrapper{
  flex: 1;
}

.ant-col.ant-col-24{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ant-form-item-control {
  width: 100%;
}

.ant-row.ant-form-item>>>.ant-form-item-label{
  width: 80px;
  text-align: right;
}

.ant-form-item {
  margin-bottom: 0;
}
</style>
